<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            border: none;
            padding: 0 10px 0 10px;
            margin: 0;
            overflow: hidden;
            width: 100vw;
            box-sizing: border-box;
        }
        ul {
            box-sizing: border-box;
            margin: 0;
            width: 100%;
            height: calc(100vh - 125px);
        }
        textarea {
            margin-top: 10px;
            width: 100%;
            height: 80px;
            line-height: 20px;
        }
        button {
            margin-top: 4px;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 20px;
            padding: 0;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
<ul id="ul" style="overflow-y: scroll;"></ul>
<textarea id="ta" cols="30" rows="10"></textarea>
<button onclick="createLi()">生成列表</button>
<script>
    window.copy = function(text) {
        var input = document.createElement('input');
        input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
        input.setAttribute('value', text);
        document.body.appendChild(input);
        // input.setSelectionRange(0, 9999);
        input.select();
        var res = document.execCommand('copy');
        document.body.removeChild(input);
        return res;
    }
    window.createLi = function () {
        let ul = document.getElementById('ul');
        let ta = document.getElementById('ta');
        ul.innerHTML = '';
        ta.value.split('\n').map(_ => _.trim()).filter(_ => _).forEach(l => {
            ul.innerHTML += `<li>${l}</li>`;
        });
        ta.value = '';
        let lis = ul.getElementsByTagName('li');
        for (let i = 0;i < lis.length;i++) {
            lis[i].onclick = function () {
                window.copy(this.innerText.trim());
                this.remove();
            }
        }
    }
</script>
</body>
</html>
